<template>
  <div>
    <div>
      <Form :label-width="150" inline>
        <FormItem label="行政区划:" prop="areacode">
          <area-linkage :areaCode.sync="queryParam.ssca0043" :countyDisable=false :streetDisable=false
                        :communityDisable=false></area-linkage>
        </FormItem>
        <Form-item label="户主姓名:">
          <Input v-model="queryParam.azcp0003" placeholder="请输入户主姓名"
                 style="width: 200px"></Input>
        </Form-item>
        <Form-item label="证件号码:">
          <Input v-model="queryParam.azcp0001" placeholder="请输入证件号码"
                 style="width: 200px"></Input>
        </Form-item>
        <FormItem label="居住地是否完善:">
          <dictSelect :sel_val='queryParam.complete' dictCode="yesorno" :bindData.sync="queryParam.complete"
                      style="width: 200px" clearable/>
        </FormItem>
        <Row class="button_row">
                    <span style="float: right;">
                      <Button type="primary" @click="searchQuery">查询</Button>
                      <Button type="primary" class="button_item_left" @click="searchReset">重置</Button>
                    </span>
        </Row>
      </Form>
    </div>
    <Modal v-model="visible" :title="title" width="800" style="position:relative;">
      <Form ref="data" :model="data" :label-width="150" :rules="rules" :disabled="disableSubmit">
        <table style="width:100%;">
          <tr>
            <td>
              <FormItem label="户主姓名" prop="azcp0003">
                <Input v-model="data.azcp0003" style="width: 180px" readonly/>
              </FormItem>
            </td>
            <td>
              <FormItem label="证件号码" prop="azcp0001">
                <Input v-model="data.azcp0001" style="width: 180px" readonly/>
              </FormItem>
            </td>
          </tr>
          <td colspan="2">
            <FormItem label="常住地行政区划" prop="azdf0501">
              <area-linkage :areaCode.sync="data.azdf0501" :countyDisable=true :streetDisable=true
                            :communityDisable=true></area-linkage>
            </FormItem>
          </td>
          <tr>
            <td>
              <FormItem label="联系方式" prop="azdf0011">
                <Input v-model="data.azdf0011" placeholder="" maxlength="100" style="width:180px"/>
              </FormItem>
            </td>
          </tr>
          <tr>
            <td>
              <FormItem label="联系人类型" prop="azdf0510">
                <c-dict-select v-model="data.azdf0510" dictCode="contact_type" :width="180"
                               @change="changeContactType"/>
              </FormItem>
            </td>
            <td>
              <FormItem label="联系人姓名" prop="azdf0511">
                <Input v-model="data.azdf0511" placeholder="请输入联系人姓名" class="itemStyle" maxlength="30"
                       :disabled="data.azdf0510=='01'||!data.azdf0510"/>
              </FormItem>
            </td>
          </tr>

          <tr>
            <td>
              <FormItem label="居住地类型" prop="azdf0512">
                <c-dict-select v-model="data.azdf0512" dictCode="live_type" :width="180"
                               :disabled="azdf0512Disabled"/>
              </FormItem>
            </td>
            <td v-if="data.azdf0512=='01'">
              <FormItem label="小区名称" prop="azdf0513">
                <Select v-model="data.azdf0513" class="itemStyle" filterable>
                  <div slot="empty">not Found data</div>
                  <Option :value="i.cmcg0002" v-for="i in azdf0513List" :key="i.id">{{ i.cmcg0002 }}
                  </Option>
                </Select>
              </FormItem>
            </td>
            <td v-if="data.azdf0512=='02'">
              <FormItem label="村小组号" prop="azdf0516">
                <Input v-model="data.azdf0516" placeholder="请输入村小组号" class="itemStyle" maxlength="20"/>
              </FormItem>
            </td>
          </tr>
          <tr v-if="data.azdf0512=='01'">
            <td>
              <FormItem label="楼栋号" prop="azdf0514">
                <Input v-model="data.azdf0514" placeholder="请输入楼栋号" class="itemStyle" maxlength="20"/>
              </FormItem>
            </td>
            <td>
              <FormItem label="户室门牌号" prop="azdf0515">
                <Input v-model="data.azdf0515" placeholder="请输入户室门牌号" class="itemStyle" maxlength="20"/>
              </FormItem>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <FormItem label="常住地详细地址" prop="azdf0008">
                <Input v-model="data.azdf0008" placeholder="" :disabled="true" style="width: 562px"
                       maxlength="100"/>
              </FormItem>
            </td>
          </tr>
        </table>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="visible = false">取消</Button>
        <template v-if="!disableSubmit">
          <Button type="primary" size="large" @click="handleSubmit('data')">确定</Button>
        </template>
      </div>
    </Modal>
    <div class="table_div">
      <vxe-table border
                 resizable
                 row-id="id"
                 :row-key="true"
                 show-overflow="tooltip"
                 highlight-hover-row
                 align="center"
                 header-align="center"
                 ref="xTree"
                 :loading="Loading"
                 :data="tableData">
        <vxe-table-column field="ssca0002_name" title="救助类型" align="center" width="150" fixed="left"/>
        <vxe-table-column field="azcp0003" title="户主姓名" align="center" width="100" fixed="left"/>
        <vxe-table-column field="azcp0001" title="证件号码" align="center" width="200" fixed="left"/>
        <vxe-table-column field="ssca0043" title="属地区划" align="center" width="250" :formatter="renderAreaName"/>
        <vxe-table-column field="azdf0501" title="常住地区划" align="center" width="250" :formatter="renderAreaName"/>
        <vxe-table-column field="azdf0008" title="常住地详细地址" align="center" width="250"/>
        <vxe-table-column field="azdf0512_name" title="居住地类型" align="center" width="100"/>
        <vxe-table-column field="azdf0513" title="小区名称" align="center" width="120"/>
        <vxe-table-column field="azdf0514" title="楼栋号" align="center" width="120"/>
        <vxe-table-column field="azdf0515" title="户室门牌号" align="center" width="120"/>
        <vxe-table-column field="azdf0516" title="村小组号" align="center" width="120"/>
        <vxe-table-column field="bpm_status_name" title="业务状态" align="center" width="120"/>
        <vxe-table-column field="" title="操作" min-width="100" fixed="right">
          <template v-slot="{ row }">
            <Button type="info" size="small" style="margin-right: 5px" @click="handleEdit(row)">编辑
            </Button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <Page :total="dataCount" :page-size="pageSize" show-total class="paging"
            @on-change="handleTableChange" :current="pageNo"></Page>
    </div>
  </div>
</template>

<script>
import {postAction} from '@/api/request'
import {CommonMixin} from '@/views/common/js/CommonMixin'
import dictSelect from '@/components/dictSelect/dictSelect.vue'
import {IdentityCodeValid} from '@/plugins/idcardValid.js'
import DateFormat from '@/plugins/format.js'
import {getSign, createUpLoadFiles, compressImg} from '@/api/common'

export default {
  mixins: [CommonMixin],
  components: {
    dictSelect,
  },
  data() {
    return {
      rules: {
        azdf0501: [
          {required: true, message: '请选择常住地行政区划', trigger: 'blur'},
          {pattern: /^((?!000$).)*$/, message: '请选择完整常住地行政区划', trigger: 'blur'}
        ],
        azdf0512: [
          {required: true, message: '请选择居住地类型', trigger: 'change'}
        ],
        azdf0513: [
          {required: true, message: '请选择小区名称', trigger: 'change'}
        ],
        azdf0514: [
          {required: true, message: '请输入楼栋号', trigger: 'blur'}
        ],
        azdf0515: [
          {required: true, message: '请输入户室门牌号', trigger: 'blur'}
        ],
        azdf0516: [
          {required: true, message: '请输入村小组号', trigger: 'blur'}
        ],
        azdf0510: [
          {required: true, message: '请选择联系人类型', trigger: 'blur'}
        ],
        azdf0511: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'}
        ],
        azdf0011: [
          {required: true, message: '请填写联系方式', trigger: 'blur'},
          {pattern: /^[0-9]{5,20}$/, message: '请填写正确的联系电话', trigger: 'blur'}
        ],
      },
      fieldsToValidate: ['azdf0501', 'azdf0512', 'azdf0011', 'azdf0510', 'azdf0511'],
      disableSubmit: false,
      tableData: [],
      Loading: false,
      url: {
        list: '/api/ac/subsistence/ss01004Service/getConfigPageList'
      },
      data: {
        id: null,
        azdf0501: null,
        azdf0512: null,
        azdf0513: null,
        azdf0514: null,
        azdf0515: null,
        azdf0516: null,
        azdf0008: null
      },
      processData: {},
      visible: false,
      modal: false,
      title: '',
      azdf0513List: [],
      azdf0512Disabled: true
    }
  },
  methods: {
    handleEdit(row) {
      let that = this
      that.disableSubmit = false
      if (row.bpm_status != '100') {
        this.$Message.error('业务正在办理中, 不允许修改居住地信息')
        return
      }
      that.title = '居住地信息编辑'
      let record = row
      if (record.id) {
        that.visible = true
        that.data = Object.assign({}, record)
        this.changeArea(record.azdf0501);
      } else {
        that.visible = false
      }
    },
    async handleSubmit(name) {
      let that = this
      let validate = true
      let err_msg = []
      for (let item of that.fieldsToValidate) {
        that.$refs[name].validateField(item, (error) => {
          if (error) {
            validate = false
            err_msg.push(that.rules[item][0].message)
          }
        })
      }
      if (validate) {
        var azdf0501 = that.data.azdf0501;
        var areaName = await that.getAreaNameByCode(azdf0501);
        var azdf0008 = areaName;
        if (that.data.azdf0512 == '01') {
          that.data.azdf0516 = null;
          azdf0008 += " " + that.data.azdf0513 + " " + that.data.azdf0514 + " " + that.data.azdf0515;
        } else {
          that.data.azdf0513 = null;
          that.data.azdf0514 = null;
          that.data.azdf0515 = null;
          azdf0008 += " " + that.data.azdf0516;
        }
        that.data.azdf0008 = azdf0008;

        let url = '/api/ac/subsistence/ss01004Service/updateConfig'
        postAction(url, that.data).then((res) => {
          if (res.data.errcode != 0) {
            that.$Message.error(res.data.errmsg)
          } else {
            that.modalFormOk()
            that.visible = false
          }
        }).finally(() => {
          that.Loading = false
        })
      } else {
        that.$Message.error(err_msg[0])
        return
      }
    },
    //获取小区名称列表
    getAzdf0513List() {
      var azdf0501 = this.data.azdf0501
      postAction('/api/ac/subsistence/ss01004Service/findList', {cmcg0001: azdf0501}).then((res) => {
        if (res.data.errcode != 0) {
          this.$Message.error(res.data.errmsg)
        } else {
          this.azdf0513List = res.data.data
        }
      }).finally(() => {
      })
    },
    changeArea(azdf0501) {
      let reg = /^((?!000$).)*$/
      if (reg.test(azdf0501)) {
        this.azdf0512Disabled = false
      } else {
        this.azdf0512Disabled = true
        this.data.azdf0512 = null
        this.data.azdf0513 = null
        this.data.azdf0514 = null
        this.data.azdf0515 = null
        this.data.azdf0516 = null
      }
    },
    changeContactType() {
      let that = this
      if (that.data.azcp0003 != undefined && that.data.azcp0003 != "") {
        if (that.data.azdf0510 === "01") {
          this.$set(this.data,"azdf0511",that.data.azcp0003);
        } else {
          that.data.azdf0511 = undefined
        }
      } else {
        // that.$Message.error('请输入申请人姓名')
      }
    },
  },
  created() {
    this.findAreaList()
  },
  watch: {
    // 'data.azdf0501': function (val, oldVal) {
    //
    // },
    'data.azdf0512': function (val) {
      this.fieldsToValidateRemove(['azdf0513', 'azdf0514', 'azdf0515', 'azdf0516'])
      if (val == '01') {
        this.fieldsToValidateAdd(['azdf0513', 'azdf0514', 'azdf0515'])
        this.getAzdf0513List()
      } else if (val == '02') {
        this.fieldsToValidateAdd(['azdf0516'])
      }
    },
  }
}
</script>
<style scoped>
/deep/ .ivu-form-item-error-tip {
  display: none;
}

/deep/ .ivu-form-item {
  margin-bottom: 10px;
}

.itemStyle {
  width: 180px
}
</style>
